<template>
  <div class="infinite-container" ref="scroller">
    <!-- 搜索框 -->
    <SearchBarClick @search="searchHandler"></SearchBarClick>

    <!-- 顶部推荐科室列表 -->
    <div class="topDeptList" v-if="depts&&depts.length>0">
      <ul class="flex wrap">
        <li v-for="(item, i) in deptsDisplay" @click="goSelectDepartment(item)" :key="i" class="mt10">
          <i class="w-icon inline-block" :class="'w-icon-'+item.icon" alt />
          <p>{{item.consultDeptName | safeSlice(4)}}</p>
        </li>
      </ul>
    </div>

    <!-- 推荐医生列表 -->
    <div class="recommendDoctor mt10">
      <!-- 条件筛选 -->
      <SearchConditions @conditionChange="conditionChangeHandle" :deptList="deptsDisplay" />

      <!-- <div class="title-v2">热门医生</div> -->
      <ul class="doctorList">
        <li
          class="flex flex_vcenter"
          v-for="(item,index) in doctors"
          @click="goDoctorDetail(item)"
          :key="index"
        >
          <img v-lazy="item.headerUrl" class="doctor-image" alt />
          <div class="ostatus" v-show="item.online == 0">在线</div>
          <div class="flex_full">
            <div>
              <span class="docName">{{item.doctorName||""}}</span>
              <span class="borderBtn">{{item.doctorTitle}}</span>
              <span>
                <i class="w-icon w-icon-common_icon_star" />
              </span>
              <span v-if="item.score != 0">{{item.score | fixedMoneyClean(1)}}</span>
              <span v-else>10.0</span>
            </div>
            <div style="padding:5px 0;" class="text-gray">
              <span>{{item.orgName ||""}}</span>
              <span>{{item.departmentName ||""}}</span>
            </div>
            <div class="text-gray">
              <span class="goodAt">擅长</span>
              <span>{{(item.expert ||"") | safeSlice(15)}}</span>
              <span></span>
            </div>
            <div class="text-gray flex flex_between mt6">
              <div>
                <span class="type-button type1" v-if="item.imageAbleFlag ==1">图文</span>
                <span class="type-button type2" v-if="item.telephoneFlag ==1">电话</span>
                <span class="type-button type3" v-if="item.videoFlag ==1">视频</span>
                <span class="type-button type4" v-if="item.returnVisitFlag ==1">云诊室</span>
              </div>
              <div>
                <span class="t3">接诊量 {{item.visitingVolume}}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <empty v-show="isEmpty"></empty>
      <mu-infinite-scroll
        :loading="loading"
        :scroller="scroller"
        @load="getReport"
        v-show="loading"
      />
    </div>
  </div>
</template>

<script>
import SearchBarClick from "../../components/SearchBarClick.vue";
import empty from "@/components/empty";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";
import { topDeptData } from "../../api/const";
import SearchConditions from "./SearchConditions";

// 没有匹配的科室，返回默认科室头像
const DEFAULT_DEPARTMENT_ICON = "zxwz_icon_gck";

// 首页最多显示科室数量
const MAX_DEPARTMENT = 10;

export default {
  data() {
    return {
      isEmpty: false,
      topDeptData,
      doctors: [],
      depts: [],
      deptsDisplay: [],
      params: {
        pageNo: 0,
        pageSize: 50,
        departmentId: "",
        busType: this.$route.query.busType || '1,2,3,4,5'
      },
      loading: false,
      scroller: null
    };
  },
  components: {
    SearchBarClick,
    empty,
    SearchConditions
  },
  mounted() {
    this.scroller = this.$refs.scroller;
    this.getReport();
  },
  methods: {
    getReport() {
      let self = this;
      this.params.pageNo++;
      commonAjaxJson(RESTFUL_API.querySearch, this.params, true).then(res => {
        if (res) {
          self.doctors = self.doctors.concat(
            (res.data.data && res.data.data.doctorConfigExts) || []
          );
          var depts = (res.data.data && res.data.data.deptList) || [];

          // 2019-12-19 过滤科室名称为空的数据
          if (depts.length > 0) {
            depts = depts.filter(v => !!v.consultDeptName);

            depts.forEach(item => {
              item.type = 1;
              item.deptName = item.consultDeptName;
              var fr = self.topDeptData.find(it => {
                return item.consultDeptName == it.name;
              });
              if (fr) {
                item.icon = fr.icon;
              } else {
                item.icon = DEFAULT_DEPARTMENT_ICON;
              }
            });

            self.depts = depts;

            let tempArr = [];

            if (depts.length > MAX_DEPARTMENT) {
              self.deptsDisplay = depts.slice(0, MAX_DEPARTMENT - 1);
            } else {
              self.deptsDisplay = depts;
            }
            self.deptsDisplay.push(
              self.topDeptData[self.topDeptData.length - 1]
            );

            if (res.data.data.doctorConfigExts.length < this.params.pageSize) {
              this.scroller = null;
            }
            self.$store.commit("UPDATE_PAGEDATA", self.depts);
          }

          self.isEmpty = !self.doctors.length;
        }
      });
    },

    // 搜索科室和医生
    searchHandler(val) {
      val = String.prototype.trim.call(val);
      // if (val.length == 0) {
      //   this.$store.commit("UPDATE_TOAST", { message: "请输入搜索关键字!" });
      //   return;
      // }
      this.params.keyword = val;
      this.params.pageNo = 0;
      this.doctors = [];
      this.getReport();
    },

    // 按科室筛选
    goSelectDepartment(item) {
      this.$store.commit("UPDATE_selectedDeptName", item.consultDeptName);
      this.conditionChangeHandle({ dept: item });
    },

    // 医生详情页
    goDoctorDetail(item) {
      this.$router.push({
        path: "/queryOnline/doctorDetail",
        query: {
          docid: item.doctorId,
          departmentId: item.departmentId
        }
      });
    },

    conditionChangeHandle(obj) {
      if (!obj) {
        return;
      }

      // 初始化pageNo
      this.params.pageNo = 0;
      this.params.keyword = "";
      this.doctors = [];

      // 排序筛选
      if (obj.sortType) {
        this.params.orderByType = obj.sortType.id;
        this.getReport();
      }

      // 类型筛选
      if (obj.selTypeData) {
        this.params.busType = obj.selTypeData.id;
        this.params.doctorLevel =
          obj.doctorLevelData == "" ? "" : obj.doctorLevelData;
        this.getReport();
      }

      // 科室筛选
      if (obj.dept) {
        this.params.departmentId = obj.dept.deptId || '';
        this.getReport();
      }

      // 机构筛选
      if (obj.org) {
        this.params.orgCode = obj.org.code || "";
        this.getReport();
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";
.infinite-container {
  .title-v2 {
    font-size: 16px;
    padding: 8px 16px;
    background: #fff;
    color: #666;
  }
  .borderBtn {
    font-size: 9px;
    padding: 1px 8px;
    color: #ff6600;
    border-color: #ff6600;
  }
  .goodAt {
    font-size: 14px;
    background: #fff;
    color: #666;
  }
  .text-gray {
    color: #666;
  }
  .docName {
    color: #333;
    font-size: 1.2em;
  }
  @{deep} .search-bar .icon-ssousuo {
    top: 0;
  }
  @{deep} .search-bar .search-input {
    height: 30px;
  }
}

.topDeptList {
  padding: 10px 0;
  li {
    width: 20%;
    text-align: center;
    img {
      width: 24px;
    }
  }
  background-color: white;
  margin-top: 44px;
}

.doctorList {
  li {
    position: relative;
  }
}

.ostatus {
  width: 42px;
  height: 21px;
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  top: 0;
  right: 15px;
  background: url("../../assets/wzjl/tab_zxwz_zx.png") no-repeat center
    center/100% 100%;
}

.type-button {
  padding: 1px 6px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: 12px;
  background: linear-gradient(to right, #59c2f0, #47abea);
  color: #fff;
  &.type2 {
    background: linear-gradient(to right, #6aa0e1, #5789da);
  }
  &.type3 {
    background: linear-gradient(to right, #48cc88, #3fc071);
  }
  &.type4 {
    background: linear-gradient(to right, #fdbd42, #fcaf3b);
  }
}
</style>
